﻿<div class="row">
    <section class="col-lg-12 connectedSortable ui-sortable">
        <div class="box box-success">
            <div class="box-header ui-sortable-handle" style="cursor: move;">
                <i class="fa fa-comments-o"></i>
                <h3 class="box-title">New message</h3>
            </div>
            <form role="form" ng-submit="send()">
                <div class="box-body">
                    <div class="form-group">
                        <text-angular ng-model="content" placeholder="..."></text-angular>
                    </div>
                    <div class="form-group">
                        <ui-select ng-model="selectedItem.toUser" style="width: 100%;">
                            <ui-select-match placeholder="Share with...">
                                {{$select.selected.userName}}
                            </ui-select-match>
                            <ui-select-choices repeat="item in people | filter: $select.search"
                                               refresh="refreshPeople($select.search)"
                                               refresh-delay="333">
                                <div ng-bind-html="item.userName | highlight: $select.search"></div>
                            </ui-select-choices>
                        </ui-select>
                    </div>
                </div>
                <div class="box-footer">
                    <button class="btn btn-primary" type="submit">Post</button>
                </div>
            </form>
        </div>
        <div class="box box-primary" data-ng-repeat="message in messages">
            <div class="box-header ui-sortable-handle" style="cursor: move;">
                <div class="callout callout-info" data-ng-bind-html="message.content"></div>
            </div>
            <!-- form start -->
            <form role="form" ng-submit="push(message)">
                <div class="box-body chat">
                    <div class="item" data-ng-repeat="comment in message.comments">
                        <img class="online" alt="user image" src="/Content/imgs/avatar.png">
                        <p class="message">
                            <a class="name" href="#">
                                {{comment.from.userName}}
                            </a>
                            {{comment.content}}
                        </p>
                    </div>
                </div>
                <div class="box-footer">
                    <div class="input-group">
                        <input data-ng-model="message.newComment" placeholder="Type message..." class="form-control">
                        <div class="input-group-btn">
                            <button type="submit" class="btn btn-success"><i class="fa fa-plus"></i></button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </section>
</div>